/*
 * Copyright 2019 the original author or authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { app, marketing, store } from "@mall/api-services"
import { Carousel } from "antd-mobile"
import * as _ from "lodash"
import * as React from "react"
import { useEffect, useState } from "react"
import { RouteComponentProps, withRouter } from "react-router"
import { APP_ID } from "../env"
import Icon from "../icon"
import ProductList from "../product/product-list"
import "./index.scss"
import "./images/top-ad-1.jpg"
import "./images/top-ad-2.jpg"
import "./images/top-ad-3.jpg"
import "./images/top-ad-4.jpg"
import "./images/top-ad-5.jpg"
import "./images/top-ad-6.png"

function HomeTopAdvertisement() {

  const [banners, setBanners] = useState([] as marketing.Banner[])


  useEffect(() => {
    marketing.BannerServiceV1
      .getBanners()
      .page(1).limit(6)
      .pages([marketing.BannerPage.HomePage])
      .locations([marketing.BannerLocation.Top])
      .list()
      .then(pageBanners => setBanners(pageBanners.elements ? pageBanners.elements : []))
  }, [])

  return (
    <div className="home-top-advertisements">
      <Carousel
        autoplay
        infinite
        cellSpacing={20}
        dotStyle={{
          width: "8px",
          height: "2px",
          borderRadius: "2px",
        }}
        dotActiveStyle={{
          width: "10px",
          height: "2px",
          borderRadius: "2px",
          backgroundColor: "#fff",
        }}>
        {
          _.map(banners, banner => <div key={banner.name} dangerouslySetInnerHTML={{ __html: banner.content }}/>)
        }
      </Carousel>
    </div>)
}

function HomeTopMenus() {

  const [menus, setMenus] = useState([] as app.Menu[])

  useEffect(() => {
    app.ApplicationServiceV1.getMenus(APP_ID).then(setMenus)
  }, [])

  return (
    <div className="home-top-menus">
      {
        _.map(menus, menu => (
          <div className="menu-item" key={menu.id}>
            <div className="menu-icon">
              <img src={menu.icon} alt=""/>
            </div>
            <span className="menu-title">{menu.title}</span>
          </div>
        ))
      }
    </div>
  )
}

interface HomeProps extends RouteComponentProps {

}

interface HomeState {
  products: store.Product[];
}

class Home extends React.Component<HomeProps, HomeState> {

  public constructor(props: Readonly<HomeProps>) {
    super(props)

    this.state = {
      products: [],
    }
  }

  public componentDidMount(): void {

    store.ProductServiceV1.getProducts().name("手机")
      .list()
      .then(pageProducts => {
        this.setState({ products: pageProducts.elements })
      })
  }

  public render() {

    const { history } = this.props
    const { products } = this.state

    return (
      <div className="app-home">
        <div className="app-home-top">
          <div className="home-top-bar">
            <Icon className="home-top-menu" type="menu"/>
            <div className="home-search-bar" onClick={() => history.push("/search")}>
              <Icon type="search"/>
              <span style={{ marginLeft: "4px" }}>佳明手表</span>
            </div>
            <Icon className="home-top-menu" type="qr_code"/>
          </div>
          <HomeTopAdvertisement/>
          <HomeTopMenus/>
        </div>
        <ProductList products={products}/>
      </div>
    )
  }
}

export default withRouter(Home)
